<template>
  <view class="container">
    <view>
      <view class="top-font">计划</view>
      <view class="line"></view>
      <view class="function-list-plan">
        <navigator class="function-item" v-for="(item, index) in planFeatures" :key="index" :url="item.url">
          <view class="icon">{{ item.icon }}</view>
          <text class="function-name">{{ item.title }}</text>
        </navigator>
      </view>
    </view>
    <view>
      <view class="top-font">其他</view>
      <view class="line"></view>
      <view class="function-list-plan">
        <navigator class="function-item" v-for="(item, index) in extFeatures" :key="index" :url="item.url">
          <view class="icon">{{ item.icon }}</view>
          <text class="function-name">{{ item.title }}</text>
        </navigator>
      </view>
    </view>
    <!-- <view>
      <view class="top-font">链接跳转</view>
      <view class="line"></view>
      <view class="function-list-plan">
        <view class="function-item" v-for="(item, index) in linkFeatures" :key="index">
          <view class="icon">{{ item.icon }}</view>
          <uni-link :href="item.url" :text="item.title" class="function-name"></uni-link>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Feature {
  url: string;
  title: string;
  icon: string;
}

const planFeatures = ref<Feature[]>([
  { url: "/pages/feature/studyPlan/index", title: "学习计划", icon: "📚" }, // 书本代表学习计划
  { url: "/pages/feature/workPlan/index", title: "工作计划", icon: "💼" }, // 仍然使用公文包，或者可以改为 "📈" 代表工作进度
  { url: "/pages/feature/lifePlan/index", title: "生活计划", icon: "🏠" }, // 房子代表生活
  { url: "/pages/feature/countPlan/index", title: "计数任务", icon: "1️⃣" }, // 数字加圆圈代表计数
]);
const extFeatures = ref<Feature[]>([
  { url: "/pages/feature/memoryDayExt/index", title: "纪念日", icon: "🎉" }, // 庆祝代表纪念日
  { url: "/pages/feature/countDownDayExt/index", title: "倒计时", icon: "⏳" }, // 沙漏代表倒计时
  // { url: "/pages/feature/memoExt/index", title: "备忘录", icon: "✏️" }, // 铅笔代表备忘录（已取消注释作为示例）
  // { url: "/pages/feature/accountsExt/index", title: "存钱记账", icon: "💰" }, // 钱袋代表存钱记账（已取消注释作为示例）
  // { url: "/pages/feature/loveExt/index", title: "恋爱记录", icon: "💕" },
]);
const linkFeatures = ref<Feature[]>([
  { url: "https://www.baidu.com", title: "个人wiki", icon: "💼" },
])

</script>

<style scoped>
.container {
  /* padding: 20px; */
  /* background-image: url(https://tse4-mm.cn.bing.net/th/id/OIP-C.6s6d__MNoa6Kz-gmfwXR-wHaLG); */
  background-size: cover;
  height: 100%;
  margin: 0;
  padding: 0 20px;
  overflow-y: hidden;
  /* 允许垂直滚动 */
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.function-list-plan {
  display: flex;
  /* height: 200px; */
  margin-top: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.function-item {
  flex-basis: calc(33.33% - 40px);
  padding: 10px;
  height: 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 20px;
  margin: 0 10px;
  text-align: center;
}

.icon {
  font-size: 20px;
  margin-bottom: 10px;
}

.function-name {
  font-size: 13px;
}

.line {
  width: 100%;
  height: 2px;
  background-color: rgba(50, 73, 150, 0.5);
  margin-bottom: 20px;
  margin-top: 10px;
}

.top-font {
  font-size: 20px;
  /* 字体大小 */
  color: #5e81c7;
  /* 字体颜色（可以根据需要调整） */
  white-space: nowrap;
  /* 防止文字换行 */
  margin-top: 10px;
  text-align: center;
}
</style>